<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px" v-show="showSearch">
            <el-form-item label="报告类型" prop="rtType">
                <el-select v-model="queryParams.rtType" placeholder="请选择报告类型" clearable>
                    <el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上传人" prop="rtPepole">
                <el-input v-model="queryParams.rtPepole" placeholder="请输入上传人" clearable />
            </el-form-item>
            <el-form-item label="上传日期" prop="time">
                <el-date-picker v-model="queryParams.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" @click="handleUpload">
                    <svg-icon class-name="upload-icon" icon-class="upload" /><span style="margin-left:10px">上传</span>
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="dataList" stripe @selection-change="handleSelectionChange" row-key="id">
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
            <el-table-column label="模板名称" align="center" prop="rtName" width="255" show-overflow-tooltip />
            <el-table-column label="报告类型" align="center" prop="rtType" />
            <el-table-column label="上传人" align="center" prop="rtPepole" />
            <el-table-column label="上传日期" align="center" prop="rtTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="text" @click="handleDown(scope.row)">下载</el-button>
					<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />

        <el-dialog title="报告管理" v-model="openFile" width="500px" top="200px" append-to-body>
            <el-form ref="bgmbRef" label-width="120px" :model="form" :rules="rules" >
                <el-row style="margin: 20px 0;">
                    <el-col :span="24">
                        <el-form-item label="报告类型" prop="radio">
                            <el-radio-group v-model="form.radio" @change="chooseRadio">
                                <el-radio label="地震灾害风险评估报告">地震灾害风险评估报告</el-radio>
                                <el-radio label="辅助对策报告">辅助对策报告</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="报告名称"  prop="attachId">
                            <file-upload :action="uploadFileUrl" :limit="1" ref="fileUpload" v-model="form.fileList"
                                :fileType='["doc", "docx"]' />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="fileSubmitForm">保 存</el-button>
                    <el-button @click="openFile = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup name="reportModule">
import { getAllList , saveReportTemplate} from "@/api/resultsReportImg/reportModule.js"
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const ids = ref();
const loading = ref(false);
const single = ref(true);
const multiple = ref(true);
const noPassOpen = ref(false);
const total = ref(0);
const showSearch = ref(true);
const optionType = [{ label: '地震灾害风险评估报告', value: '地震灾害风险评估报告' }, { label: '辅助对策报告', value: '辅助对策报告' }]
const openFile = ref(false);
const uploadFileUrl = ref(
    import.meta.env.VITE_APP_BASE_API + "/attachment/uploadFile"
); // 上传的图片服务器地址
const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        rtPepole: undefined,
        rtType: undefined,
        time:undefined,
    },
    form: {
        radio: '地震灾害风险评估报告',
        fileList: [],
        attachId: '',
    },
    rules: {
        attachId: [{ required: true, message: "不通过原因不能为空", trigger: "blur" }],
        radio: [{ required: true, message: "报告类型不能为空", trigger: "blur" }],
    }
})
const { queryParams, form, rules } = toRefs(data)


/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    dataList.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({...queryParams.value,rtStartTime:queryParams.value.time?queryParams.value.time[0]:undefined,rtEndTime:queryParams.value.time?queryParams.value.time[1]:undefined}).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        loading.value = false;
    });
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.rtId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 删除按钮操作 */
function handleDelete(row) {
    // const id = row.id || ids.value;
    // proxy.$modal.confirm('是否确认选中报告的数据项?').then(function () {
    //     return pass(infoIds);
    // }).then(() => {
    //     getList();
    //     proxy.$modal.msgSuccess("删除成功");
    // }).catch(() => { });
}

function chooseRadio(value) {
    console.log(value)
}
// 上传 
function handleUpload() {
    openFile.value = true;
    // form.value.fileList = [];
    // form.value.attachId = '';
    proxy.resetForm("bgmbRef");
}

function fileSubmitForm() {
    const fileList = JSON.parse(
        JSON.stringify(proxy.$refs["fileUpload"].fileList)
    );
    // console.log(fileList);
    const attachIds = [];
    for (var i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId);
    }
    form.value.attachId = attachIds.join(",");
    proxy.$refs["bgmbRef"].validate(valid => {
    if (valid) {
        saveReportTemplate({attId:form.value.attachId,rtType:form.value.radio}).then(res=>{
        proxy.$modal.msgSuccess("上传成功");
        openFile.value = false;
        getList();
    })
    }
})


}

// 单个下载文件
function handleDown(row) {
    var query = {
        attachId: row.attId,
        name: row.rtName
    }
    location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}
getList();
</script>
  
<style lang="scss" scoped>
.hsdTime {
    margin-right: 0px !important;

}
</style>